<template>
    <div class="my">
        <div class="top">
            <!-- 登录 --> 
            <div class="login" v-if="isLogin" @click="router.push({
                path: '/updatainfo',
                query:{id:UserInfo.userInfo[0].id}
                    })">
                <img :src="userAvatarUrl" alt=""
                    style="width: 1.45rem;height: 1.45rem; border: .0842rem solid #699EEB; border-radius: .1208rem;">
                <div class="msgList">
                    <div class="name">{{ username }}</div>
                    <div class="phone">{{ phone }}</div>
                </div>
            </div>
            <!-- 未登录 -->
            <div class="login" @click="tologin" v-else>
                <img src="@/assets/touxiang.png" alt=""
                    style="width: 1.45rem;height: 1.45rem; border: .0842rem solid #699EEB; border-radius: .1208rem;">
                <div class="msgList">
                    <div class="name">请登录</div>

                </div>
            </div>
        </div>
        <!-- 菜单项 -->
        <div class="menuList">
            <div class="menuItem" @click="toPublish">
                <span class="iconfont icon-fabiao"></span>
                <div style="margin-left: .3623rem;">我的发表</div>
            </div>
            <div class="menuItem" @click="router.push('/tointroduce')">
                <span class="iconfont icon-jieshao"></span>
                <div style="margin-left: .3623rem;">项目介绍</div>
            </div>
            <div class="menuItem" @click="logout" v-if="isLogin">
                <span class="iconfont icon-fabiao"></span>
                <div style="margin-left: .3623rem;">退出登录</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let tologin = () => {
    router.push('/login');
}

// 是否登录
const isLogin = ref(false);
// 判断是否登录的
const hasToken = () => {
    let condition = localStorage.getItem('token');
    if (condition) {
        isLogin.value = true;
    } else {
        isLogin.value = false;
    }
};


// 个人信息
const UserInfo = reactive({
    userInfo: []
});
// 计算头像
const userAvatarUrl = computed(() => UserInfo.userInfo[0].avatarUrl)
// 计算用户名
const username = computed(() => UserInfo.userInfo[0].username)
// 计算电话
const phone = computed(() => UserInfo.userInfo[0].phone)

const toPublish = () => {
    router.push('/publish');
};
//退出登录
let logout = () => {
    localStorage.clear();
    hasToken();
};
onMounted(() => {
    //console.log('3.-组件挂载到页面之后执行-------onMounted')
    UserInfo.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    hasToken();
})
</script>
<style scoped lang='css'>
.my {
    background-color: #e9e6e6;
}

.top {
    height: 4.4155rem;
    background-color: rgb(21, 119, 254);
    position: relative;
}

.login {
    display: flex;
    position: absolute;
    top: 50%;
    right: 0;
    left: 5%;
}

.login::after {
    content: "";
    width: .3932rem;
    height: .3932rem;
    border-right: .0542rem solid #fff;
    border-bottom: .0542rem solid #fff;
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.msgList {
    flex: 1;
    margin-left: .1208rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.name {
    font-size: .5348rem;
    font-weight: 500;
    color: #fff;
}

.phone {
    color: rgb(120, 199, 255);
    font-size: .3415rem;
}

.menuList {
    padding: .4831rem;
}

.menuItem {
    position: relative;
    border-radius: .2415rem;
    background-color: #fff;
    line-height: 1.2077rem;
    display: flex;
    font-size: .4348rem;
    padding-left: .4831rem;
    margin-top: .1208rem;
}

.menuItem::after {
    content: "";
    width: .3932rem;
    height: .3932rem;
    border-right: .0542rem solid #0e0505;
    border-bottom: .0542rem solid #0e0505;
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}</style>